<template>
  <h3>学生MBTI人格信息表</h3>
  <el-card>
    <el-row class="search">
      <el-col :span="8">
        <el-input class="input" v-model="queryParam.Sname" placeholder="输入姓名查找"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button class="search-but" @click="getdata" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
    <el-dialog title="新增学生" v-model="addnew" width="45%" :before-close="handleClose">
      <el-form :model="StudentInfom" :rules="Student" ref="addStudentRef">
        <el-form-item label="学号" prop="Sno">
          <el-input v-model="StudentInfom.Sno"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="Sname">
          <el-input v-model="StudentInfom.Sname"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="Sdept">
          <el-input v-model="StudentInfom.Sdept"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="Smajor">
          <el-input v-model="StudentInfom.Smajor"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="Sclass">
          <el-input v-model="StudentInfom.Sclass"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="addnewancel">取 消</el-button>
					<el-button type="primary" @click="addOk">确 定</el-button>
				</span>
      </template>
    </el-dialog>
    <el-dialog title="修改信息" v-model="changenew" width="45%" :before-close="handleClose">
      <el-form :model="StudentInfom" :rules="Student" ref="changeStudentRef">
        <el-form-item label="姓名" prop="Sname">
          <el-input v-model="StudentInfom.Sname"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="Sdept">
          <el-input v-model="StudentInfom.Sdept"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="Smajor">
          <el-input v-model="StudentInfom.Smajor"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="Sclass">
          <el-input v-model="StudentInfom.Sclass"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="changenewancel">取 消</el-button>
					<el-button type="primary" @click="changeOk">确 定</el-button>
				</span>
      </template>
    </el-dialog>
  </el-card>
  <el-table :data="tableData" class="message" height="590" border style="width: 100%" :header-cell-style="tableHeaderColor">
    <el-table-column prop="TestAnswer.Tas_id" label="编号" width="100" >
    </el-table-column>
    <el-table-column prop="Sno" label="学号" width="170">
    </el-table-column>
    <el-table-column prop="Sname" label="姓名" width="200">
    </el-table-column>
    <el-table-column prop="Sdept" label="学院" width="200">
    </el-table-column>
    <el-table-column prop="Smajor" label="专业" width="200">
    </el-table-column>
    <el-table-column prop="Sclass" label="班级" width="200">
    </el-table-column>
    <el-table-column prop="FormatTime" label="答题时间" width="250">
    </el-table-column>
    <el-table-column prop="TestAnswer.Result" label="结果" width="200">
    </el-table-column>
    <!-- <el-table-column prop="change" label="操作" width="180">
      <template #default="scope">
        <el-button type="text" size="small" @click="changeC(scope.row)">修改</el-button>
        <el-button @click="delete_(scope.row.Sno)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column> -->
  </el-table>
</template>


<script>
import axios from "axios"
export default {
  data() {
    return {
      tableData: [],
      queryParam: {
        Sname: "",
      },
      addnew: false,
      changenew: false,
      StudentInfom: {
        Sno: "",
        Sname: "",
        Sdept: "",
        Smajor: "",
        Sclass: "",
        time: "",
        result: ""
      },
      Student: {},
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    //修改header字体颜色
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #58B2FF;font-weight: 500;'
      }
    },

    async getdata() {
      let config = {
        headers: {
          'Content-Type': "application/json, charset=UTF-8"
        }
      };
      let data = {
        Sname: this.queryParam.Sname
      };
      axios.get('http://localhost:8081/chinasoccer/studentGet?Sname='+this.queryParam.Sname, data, config).then(res => {
        this.tableData = res.data.data.value;
        console.log(JSON.stringify(res.data.data.value))
      })
          .catch(error => {
            // obj.error ? obj.error(error) : null;
            console.log(JSON.stringify(error))
          });
    },
    async delete_(Sno) {
      const res = await this.$http.delete(`student/${Sno}`);
      if (res.status != 200) return this.$message.error(res.message);
      this.getdata();
    },
    addnewancel() {
      this.$refs.addStudentRef.resetFields();
      this.addnew = false;
    },
    addOk() {
      this.$refs.addStudentRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请重新输入')
        let config = {
          headers: {
            'Content-Type': "application/json, charset=UTF-8"
          }
        };
        let data = {
          Sno: this.StudentInfom.Sno,
          Sname: this.StudentInfom.Sname,
          Sdept: this.StudentInfom.Sdept,
          Sclass: this.StudentInfom.Sclass,
          Smajor: this.StudentInfom.Smajor
        };
        axios.post('http://localhost:8081/chinasoccer/studentAdd', data, config).then(res => {
          console.log(JSON.stringify(res.data))
          this.addnew = false
          this.getdata()
        })
            .catch(error => {
              // obj.error ? obj.error(error) : null;
              console.log(JSON.stringify(error))
            });



      })
      // this.$refs.addStudentRef.resetFields();
      // this.addnew = false;
    },
    async changeC(row) {
      this.changenew = true
      this.StudentInfom = row
      this.StudentInfom.Sno = row.Sno
    },
    changenewancel() {
      this.changenew = false;
      this.$refs.changeStudentRef.resetFields();
    },
    changeOk() {
      let config = {
        headers: {
          'Content-Type': "application/json, charset=UTF-8"
        }
      };
      let data = {
        Sno: this.StudentInfom.Sno,
        Sname: this.StudentInfom.Sname,
        Sdept: this.StudentInfom.Sdept,
        Sclass: this.StudentInfom.Sclass,
        Smajor: this.StudentInfom.Smajor
      };
      axios.post('http://localhost:8081/chinasoccer/studentUpdate', data, config).then(res => {
        console.log(JSON.stringify(res.data))
        this.changenew = false;
        this.getdata()
      })
          .catch(error => {
            // obj.error ? obj.error(error) : null;
            console.log(JSON.stringify(error))
          });
      /* this.$refs.changeStudentRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请重新输入')
        const {
          data: res
        } = await this.$http.put(`student/${this.StudentInfom.Sno}`, {
          Sno: this.StudentInfom.Sno,
          Sname: this.StudentInfom.Sname,
          Sdept: this.StudentInfom.Sdept,
          Smajor: this.StudentInfom.Smajor,
        })
        if (res.status != 200) return this.$message.error(res.message)
        this.$message.success('修改学生成功')
        this.changenew = false
        this.getdata()
      }) */
    }
  },
};
</script>

<style scoped>

/*.search{*/
/*  background-color: rgba(255, 255, 255, 0.25);*/
/*  box-shadow: 7px 7px 17px rgba(12, 5, 5, 0.7);   !*阴影*!*/
/*}*/

/*.message{*/
/*  background-color: rgba(255, 255, 255, 0.25);*/
/*  box-shadow: 7px 7px 17px rgba(12, 5, 5, 0.7);   !*阴影*!*/
/*}*/

.input{
margin-left: 400px;
}

.search-but{
  margin-left: 500px;
}
</style>